<template>
  <div>
    <el-dialog
      :title="$t('message.tcyh')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="isShowModal"
      width="600px"
      @close="closeDrawer"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('message.cmlq')" name="1">
          <div class="cardWrap">
            <div class="title">{{ time }}{{ $t('message.xstcyhj') }}</div>
            <div class="tip">{{ $t('message.dkwxcmlq') }}</div>
            <div class="code">
              <canvas ref="qrcodeCanvas" />
            </div>
            <div class="tips">{{ $t('message.ewmsx30') }}</div>
            <el-button
              :loading="codeLoading"
              icon="el-icon-refresh-right"
              type="primary"
              @click="getPdQrCode"
            >{{ $t('message.sdsx') }}</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('message.sdff')" name="2">
          <el-form
            ref="form"
            :model="param"
            :rules="rules"
            label-width="auto"
            label-suffix="："
          >
            <el-form-item :label="$t('message.yhsc')" prop="num">
              <span style="color: #222222">{{ time }}{{ $t('message.xiaoshi') }}</span>
            </el-form-item>
            <el-form-item :label="$t('message.yhxx')" prop="memberId">
              <div>
                <MemberSearch
                  ref="memberSearchRef"
                  @clear="MemberClear"
                  @select="MemberSelect"
                />
              </div>
            </el-form-item>
            <el-form-item :label="$t('message.cph')" prop="plateNumber">
              <el-input v-model="param.plateNumber" :placeholder="$t('message.qsr') + $t('message.cph')" maxlength="10" />
            </el-form-item>
          </el-form>

        </el-tab-pane></el-tabs>
      <div v-if="activeName == 2" slot="footer" class="dialog-footer">
        <el-button @click="closeDrawer">{{ $t('message.qx') }}</el-button>
        <el-button
          v-preventReClick
          :loading="subLoading"
          type="primary"
          @click="onSubmit"
        >{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MemberSearch from '@/components/MemberSearch'
import QRCode from 'qrcode'
import { pdVenuePd, pdVenuePdIssue, pdQrCode } from '@/api'
export default {
  components: {
    MemberSearch
  },
  data() {
    return {
      subLoading: false,
      activeName: '1',
      codeLoading: false,
      isShowModal: false,
      modalDialog: this.$store.getters.dialog,
      rules: {
        plateNumber: [{ required: true, message: this.$t('message.qsr') + this.$t('message.cph'), trigger: 'blur' }],
        memberId: [{ required: true, message: this.$t('message.qxz') + this.$t('message.hy'), trigger: 'change' }]
      },
      time: 0,
      param: {},
      smInfo: {},
      timer: null
    }
  },
  created() {
    this.getPdVenuePd()
    this.getPdQrCode()
    this.timer = setInterval(() => {
      this.getPdQrCode()
    }, 1000 * 30)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    generateQRCode(text) {
      const canvas = this.$refs.qrcodeCanvas
      QRCode.toCanvas(canvas, text, { width: 260, margin: 0 }, error => {
        if (error) console.error(error)
      })
    },
    onSubmit() {
      const { param } = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.subLoading = true
          pdVenuePdIssue({ param }).then(res => {
            this.subLoading = false
            if (res.errorCode !== '000000') return
            this.$message.success(this.$t('message.ffcg'))
            // this.closeDrawer()
          }, () => {
            this.subLoading = false
          })
        }
      })
    },
    getPdQrCode() {
      this.codeLoading = true
      pdQrCode({ param: {}}).then(res => {
        this.codeLoading = false
        if (res.errorCode !== '000000') return
        const id = res.record
        this.generateQRCode(id)
      }, () => {
        this.codeLoading = false
      })
    },
    getPdVenuePd() {
      pdVenuePd({ param: {}}).then(res => {
        if (res.errorCode !== '000000') return
        this.time = res.record
      })
    },
    closeDrawer() {
      this.isShowModal = false
      this.param = {}
      this.$refs['form'].clearValidate()
      this.$refs.memberSearchRef.clear()

      this.$emit('close')
    },
    MemberSelect(item) {
      const fn = () => {
        this.$set(this.param, 'memberId', item.id)
        this.$refs['form'].clearValidate()
      }
      fn()
    },
    MemberClear() {
      this.$set(this.param, 'memberId', '')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.cardWrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.5;
  .title {
font-weight: 500;
font-size: 24px;
color: #111111;
  }
  .tip {
    font-size: 13px;
    color: $primaryColor;
    margin-top: 12px;
    margin-bottom: 20px;
  }
  .code {
    width: 260px;
height: 260px;
  }
  .tips {
    font-size: 13px;
    color: #999;
    margin-top: 16px;
    margin-bottom: 16px;
  }
}
</style>

